*{
  margin:0;
  box-sizing: border-box;
}
body{
  font-family: PingFang SC, 'Helvetica Neue', Arial, sans-serif;
}
// Border
@border-color: @gray-3;
@border-width-base: 1px;
@border-radius-sm: 2px;
@border-radius-md: 4px;
@border-radius-lg: 8px;
@border-radius-max: 999px;
// Color Palette
@black: #000;
@white: #fff;
@gray-1: #f7f8fa;
@gray-2: #f2f3f5;
@gray-3: #ebedf0;
@gray-4: #dcdee0;
@gray-5: #c8c9cc;
@gray-6: #969799;
@gray-7: #646566;
@gray-8: #323233;
@red: #ee0a24;
@blue: #1989fa;
@orange: #FBB111;
@orange-dark: #ed6a0c;
@orange-light: #fffbe8;
@green: #07c160;
// Gradient Colors
@gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);

// Component Colors
@text-color: @gray-8;
@active-color: @gray-2;
@active-opacity: .7;
@disabled-opacity: .5;
@background-color: @gray-1;
@background-color-light: #fafafa;

// Padding
@padding-base: 4px;
@padding-xs: @padding-base * 2;
@padding-sm: @padding-base * 3;
@padding-md: @padding-base * 4;
@padding-lg: @padding-base * 6;
@padding-xl: @padding-base * 8;

// Font
@font-size-xs: 20px;
@font-size-sm: 24px;
@font-size-md: 28px;
@font-size-lg: 32px;
@font-weight-bold: 500;
@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif;

// Animation
@animation-duration-base: .3s;
@animation-duration-fast: .2s;

// Button
@button-mini-height: 44px;
@button-mini-min-width: 100px;
@button-mini-line-height: 40px;
@button-small-height: 60px;
@button-small-min-width: 120px;
@button-small-line-height: 56px;
@button-large-height: 100px;
@button-large-line-height: 92px;
@button-default-height: 88px;
@button-default-line-height: 84px;

@switch-size: 30px;
@switch-width: 2.2em;
@switch-top: .01rem;
@switch-height: 1em;
@switch-node-size: 1em;

// NavBar
.van-nav-bar{
  background:linear-gradient(90deg,rgba(145,126,255,1) 0%,rgba(145,126,255,1) 100%);
  .van-nav-bar__title{
    font-size: 34px;
    font-weight: 400;
    margin: 0 auto;
  }
  .van-icon{
    color: #fff;
  }
}
.nav-bar{
  height: 92px;
}
.van-nav-bar.bg_white{
  .van-nav-bar__title{
    color: #353535
  }
  &::after{
    display: none;
  }
  .van-icon{
    color: #353535;
  }
}
.van-nav-bar.bg_white{
  background: #fff;
}
.van-nav-bar.bg_transparent{
  background:transparent;
  &::after{
    display: none;
  }
}
.van-nav-bar__right .van-nav-bar__text{
  font-size: 24px;
  margin-right: 10px;
}
.van-nav-bar__text:active{
  background-color: transparent;
}
.van-sticky--fixed{
  .van-hairline--bottom::after{
    display: none;
  }
}
@nav-bar-height: 92px;
// @nav-bar-background-color: @white;
@nav-bar-arrow-size: 42px;
@nav-bar-icon-color: @white;;
@nav-bar-text-color: @white;;
@nav-bar-title-text-color: @white;

// Field
@field-label-width: 140px;
@field-input-text-color: @text-color;
@field-input-error-text-color: @red;
@field-input-disabled-text-color: @gray-6;
@field-placeholder-text-color: @gray-6;
@field-icon-size: 32px;
@field-clear-icon-size: 32px;
@field-clear-icon-color: @gray-5;
@field-right-icon-color: @gray-6;
@field-error-message-color: @red;
@field-error-message-text-color: 24px;
@field-text-area-min-height: 120px;
@field-word-limit-color: @gray-7;
@field-word-limit-font-size: @font-size-sm;
@field-word-limit-line-height: 32px;


// Checkbox
@checkbox-size: 30px;
@checkbox-border-color: #707070;
@checkbox-transition-duration: @animation-duration-fast;
@checkbox-label-margin: @padding-xs;
@checkbox-label-color: @text-color;
@checkbox-checked-icon-color: @blue;
@checkbox-disabled-icon-color: @gray-5;
@checkbox-disabled-label-color: @gray-5;
@checkbox-disabled-background-color: @border-color;

// PullRefresh
@pull-refresh-head-height: 80px;
@pull-refresh-head-font-size: @font-size-md;
@pull-refresh-head-text-color: @gray-6;

.van-pull-refresh,.van-pull-refresh .van-pull-refresh__track{
  min-height: 100%;
}
// Loading
@loading-text-color: @gray-6;
@loading-text-font-size: @font-size-md;
@loading-spinner-color: @gray-5;
@loading-spinner-size: 60px;
@loading-spinner-animation-duration: 0.8s;

// Picker
@picker-toolbar-height: 88px;

// Toast
@toast-max-width: 70%;
@toast-font-size: @font-size-md;
@toast-text-color: @white;
@toast-loading-icon-color: @white;
@toast-line-height: 60px;
@toast-border-radius: @border-radius-md;
@toast-background-color: fade(@text-color, 88%);
@toast-icon-size: 100px;
@toast-text-min-width: 142px;
@toast-text-padding: 6px 26px;;
@toast-default-padding: @padding-md;
@toast-default-width: 140px;
@toast-default-min-height: 140px;
@toast-position-top-distance: 100px;
@toast-position-bottom-distance: 100px;


// Dialog
.van-dialog__header{
  font-weight: 400;
}
.van-dialog .van-dialog__cancel{
  color: #999;
}
@dialog-width: 640px;
@dialog-small-screen-width: 90%;
@dialog-font-size: @font-size-lg;
@dialog-transition: @animation-duration-base;
@dialog-border-radius: 32px;
@dialog-background-color: @white;
@dialog-header-font-weight: @font-weight-bold;
@dialog-header-line-height: 48px;
@dialog-header-padding-top: 30px;
@dialog-header-isolated-padding: 50px 0;
@dialog-message-padding: 50px;
@dialog-message-font-size: 34px;
@dialog-message-line-height: 40px;
@dialog-message-max-height: 60vh;
@dialog-has-title-message-text-color: @gray-7;
@dialog-has-title-message-padding-top: 40px;;
@dialog-confirm-button-text-color: #007AFF;

// Notify
@notify-padding: 22px 0;
@notify-font-size: @font-size-md;
@notify-line-height: 40px;
@notify-primary-background-color: @blue;
@notify-success-background-color: @green;
@notify-danger-background-color: @red;
@notify-warning-background-color: @orange;

// NumberKeyboard
@number-keyboard-background-color: @white;
@number-keyboard-key-height: 108px;
@number-keyboard-key-background: @gray-3;
@number-keyboard-key-font-size: 48px;
@number-keyboard-key-active-color: @active-color;
@number-keyboard-delete-font-size: @font-size-lg;
@number-keyboard-title-color: @gray-7;
@number-keyboard-title-height: 60px;
@number-keyboard-title-font-size: @font-size-md;
@number-keyboard-close-padding: 0 @padding-md;
@number-keyboard-close-color: @blue;
@number-keyboard-close-font-size: @font-size-md;
@number-keyboard-button-text-color: @white;
@number-keyboard-button-background-color: @blue;
@number-keyboard-cursor-color: @text-color;
@number-keyboard-cursor-width: 1px;
@number-keyboard-cursor-height: 40%;
@number-keyboard-cursor-animation-duration: 1s;


.nodata{
  height: 100%;
  min-height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: @font-size-md;
  color: #666;
}


// ImagePreview
@image-preview-index-text-color: @white;
@image-preview-index-font-size: 32px;
@image-preview-index-text-shadow: 0 1px 1px @gray-8;
@image-preview-overlay-background-color: rgba(0, 0, 0, 0.9);
@image-preview-close-icon-size: 40px;
@image-preview-close-icon-color: @gray-5;
@image-preview-close-icon-active-color: @gray-6;
@image-preview-close-icon-margin: @padding-md;
@image-preview-close-icon-z-index: 1;

// Uploader
@uploader-size: 160px;
@uploader-icon-size: 44px;
@uploader-icon-color: @gray-4;
@uploader-text-color: @gray-6;
@uploader-text-font-size: @font-size-sm;
@uploader-upload-border-radius: 16px;
@uploader-upload-background-color: @gray-1;
@uploader-upload-active-color: @active-color;
@uploader-delete-color: @gray-6;
@uploader-delete-icon-size: 36px;
@uploader-delete-background-color: @white;
@uploader-file-background-color: @background-color;
@uploader-file-icon-size: 40px;
@uploader-file-icon-color: @gray-7;
@uploader-file-name-padding: 0 @padding-base;
@uploader-file-name-margin-top: @padding-xs;
@uploader-file-name-font-size: 40px;
@uploader-file-name-text-color: @gray-7;
@uploader-mask-background-color: fade(@gray-8, 88%);
@uploader-mask-icon-size:44px;
@uploader-mask-message-font-size: @font-size-sm;
@uploader-mask-message-line-height: 28px;
@uploader-loading-icon-size: 44px;
@uploader-loading-icon-color: @white;
@uploader-disabled-opacity: @disabled-opacity;

// ActionSheet
@action-sheet-max-height: 80%;
@action-sheet-header-height: 88px;
@action-sheet-header-font-size: @font-size-lg;
@action-sheet-description-color: @gray-7;
@action-sheet-description-font-size: @font-size-md;
@action-sheet-description-line-height: 40px;
@action-sheet-item-height: 100px;
@action-sheet-item-background: @white;
@action-sheet-item-font-size: @font-size-lg;
@action-sheet-item-text-color: @text-color;
@action-sheet-item-disabled-text-color: @gray-5;
@action-sheet-subname-color: @gray-7;
@action-sheet-subname-font-size: @font-size-sm;
@action-sheet-close-icon-size: 44px;
@action-sheet-close-icon-color: @gray-5;
@action-sheet-close-icon-active-color: @gray-6;
@action-sheet-close-icon-padding: 0 @padding-md;
@action-sheet-cancel-padding-top: @padding-xs;
@action-sheet-cancel-padding-color: @background-color;

// 更新提示弹窗
.CheckUpdate{
  width: 560px;
  border-radius: 4px;
  .percent-flex{
    height: .9rem;
    display: flex;
    padding: 0 20px;
    align-items: center;
    .name{
      position: absolute;
      font-size: 26px;
      top:10px;
      right: 0;
      left:0;
      text-align: center;
    }
    .percent{
      background-color: #eee;
      height: 14px;
      width: 100%;
      margin-top:40px;
      position: relative;
      .progress{
        background-color: #4873be;
        height: 14px;
        position: relative;
      }
    }
  }
  .title{
    font-size: @font-size-lg;
    background-color: #eee;
    padding: 18px 30px 16px;
  }
  .content{
    padding:24px 300px 0;
    font-size: @font-size-md;
    line-height: 46px;
    .p-content{
      padding: 100px 0;
    }
  }
  .button{
    text-align: right;
    padding:28px;
    margin:0;
    line-height: 46px;
    .btn{
      margin-left:28px;
      margin-top: 0;
      font-size: 24px;
      padding: 9px 22px;
      border-radius: .04rem;
      display: inline-block;
      border:.02rem solid #eee;
    }
    .cancel{
      padding: 10px 30px;
    }
    .btn.gradient{
      border-color: transparent;
      color: #fff;
      background-image: linear-gradient(90deg, #3a83ff 0%, #4873be 100%);
    }
  }
}

/*
 * 大写 Px 不会被转换为rem
 * 1px 2px 最好用大写
 */
.van-cell:not(:last-child)::after{
  border-bottom: 1Px solid @gray-3;
}
.van-dialog__confirm,
.van-dialog__confirm:active {
  color: @orange;
}
